import type { FormSchema } from '@/components/core/schema-form/';
import IconsSelect from '@/components/basic/icons-select/index.vue';
import { asyncRoutes } from '@/router/asyncModules';
import { str2tree } from '@/core/permission';

/** 菜单类型 M: 目录 | C: 菜单 */
const isDir = (type: API.MenuListResultItem['menuType']) => type === 'M';
const isMenu = (type: API.MenuListResultItem['menuType']) => type === 'C';
// const isPerm = (type: API.MenuListResultItem['menuType']) => type === 'C';

export const useMenuSchemas = (): FormSchema<API.MenuAddParams>[] => [
  {
    field: 'menuType',
    component: 'RadioGroup',
    label: '菜单类型',
    defaultValue: 'C',
    rules: [{ required: true, type: 'string' }],
    componentProps: {
      options: [
        {
          label: '目录',
          value: 'M',
        },
        {
          label: '菜单',
          value: 'C',
        },
      ],
    },
  },
  {
    field: 'menuName',
    component: 'Input',
    label: ({ formModel }) => (isDir(formModel['menuType']) ? '目录名称' : '菜单名称'),
    rules: [{ required: true, type: 'string' }],
  },
  {
    field: 'parentId',
    component: 'TreeSelect',
    label: '上级节点',
    componentProps: {
      fieldNames: {
        label: 'menuName',
        value: 'menuId',
      },
      getPopupContainer: () => document.body,
    },
    rules: [{ required: true, type: 'string' }],
  },
  {
    field: 'path',
    component: 'Input',
    label: '节点路由',
    rules: [{ required: true, type: 'string' }],
  },
  {
    field: 'component',
    component: 'Input',
    label: '文件路径',
    // vIf: ({ formModel }) => isMenu(formModel['menuType']) && formModel['isFrame'] != '1',
    // componentProps: {
    //   options: Object.keys(asyncRoutes).reduce(
    //     (prev, curr) => (str2tree(curr, prev, '/'), prev),
    //     [],
    //   ),
    // },
    // rules: [{ required: true, type: 'array' }],
  },
  {
    field: 'icon',
    component: () => IconsSelect,
    label: '节点图标',
  },
  {
    field: 'isFrame',
    component: 'RadioGroup',
    label: '是否外链',
    defaultValue: '0',
    rules: [{ required: true, type: 'string' }],
    componentProps: {
      options: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '0',
        },
      ],
    },
    colProps: {
      span: 12,
    },
    vIf: ({ formModel }) => isMenu(formModel['menuType']),
  },
  // {
  //   field: 'openMode',
  //   component: 'RadioGroup',
  //   label: '打开方式',
  //   defaultValue: 1,
  //   vIf: ({ formModel }) => isMenu(formModel['type']) && formModel['isExt'],
  //   colProps: {
  //     span: 12,
  //   },
  //   componentProps: {
  //     optionType: 'button',
  //     buttonStyle: 'solid',
  //     options: [
  //       {
  //         label: '新窗口打开',
  //         value: 1,
  //       },
  //       {
  //         label: '内嵌页打开',
  //         value: 2,
  //       },
  //     ],
  //   },
  // },
  {
    field: 'visible',
    component: 'RadioGroup',
    label: '是否显示',
    defaultValue: '1',
    rules: [{ required: true, type: 'string' }],
    componentProps: {
      options: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '0',
        },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    field: 'status',
    component: 'RadioGroup',
    label: '菜单状态',
    defaultValue: '1',
    rules: [{ required: true, type: 'string' }],
    componentProps: {
      options: [
        {
          label: '正常',
          value: '1',
        },
        {
          label: '停用',
          value: '0',
        },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    field: 'orderNum',
    component: 'InputNumber',
    label: '排序号',
    rules: [{ required: true, type: 'string' }],
    defaultValue: 1,
    componentProps: {
      style: {
        width: '100%',
      },
    },
    colProps: {
      span: 12,
    },
  },
];
